import React from "react"

function Dialog({
  show=false,
  title='对话框标题',
  footer,
  onClose,
  children
}) {
  const content = React.Children.only(children)
  return (<div className="modal" tabIndex={-1}
    style={{display: show ? 'block':'none'}}
  >
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title">{title}</h5>
        <button type="button"
          className="close"
          data-dismiss="modal"
          aria-label="Close"
          onClick={onClose}
        >
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div className="modal-body">
        {content}
      </div>
      { footer && (<div className="modal-footer">
        {footer}
      </div>)}
    </div>
  </div>
</div>
)
}

export default Dialog